<template>
  <div class="data-key-value">
    <el-table
      :data="value"
      :border="true"
      stripe
      size="small"
      style="width: 100%">
      <el-table-column
        v-for="(col, i) in columns"
        :key="i + col.field"
        :prop="col.field"
        :label="col.label"
        :width="col.width"
        :min-width="col.minWidth">
        <template slot-scope="scope">
          <div v-if="col.type === 'checkbox'" class="col-center">
            <el-checkbox v-model="scope.row[col.field]"></el-checkbox>
          </div>
          <div v-else class="col-view">
            <div class="view-body">
              <FileInput v-if="col.field === 'value' && scope.row['type'] === 'file'" v-model="scope.row[col.field]"></FileInput>
              <el-select v-else-if="col.cat === 'select'" v-model="scope.row[col.field]" placeholder="请选择">
                <el-option
                  v-for="item in col.select.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  clearable>
                </el-option>
              </el-select>
              <el-input v-else v-model="scope.row[col.field]" placeholder="请输入" clearable></el-input>
            </div>
            <div v-if="col.more && scope.row['type'] === 'string'" class="view-tail">
              <el-dropdown size="small">
                <i class="el-icon-more"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <FileGet @change="handleRecieveFile($event, scope.row, col)">文件转Base64</FileGet>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { filer } from '@daelui/dogjs/dist/components.js'
import FileInput from './file-input.vue'
import FileGet from './file-get.vue'
import columns from '../constant/key-value-columns.js'

export default {
  components: {
    FileInput,
    FileGet
  },

  props: {
    columns: {
      default () {
        return columns
      }
    },
    value: {
      default () {
        return []
      }
    }
  },

  model: {
    prop: 'value'
  },

  data () {
    return {

    }
  },

  watch: {
    value: {
      deep: true,
      handler () {
        this.refresh()
      }
    }
  },

  mounted () {
    this.refresh()
  },

  methods: {
    refresh () {
      let list = this.value
      let last = list[list.length - 1], isEmpty = true
      if (last) {
        this.columns.forEach(col => {
          if(last[col.field] && col.attend) {
            isEmpty = false
          }
        })
      }
      if (!last || !isEmpty) {
        let node = {}
        this.columns.forEach(col => {
          node[col.field] = col.default !== undefined ? col.default : ''
        })
        this.value.push(node)
      }
    },
    // 接收文件
    handleRecieveFile (file, row, col) {
      filer.fileToBase64(file).then(text => {
        row[col.field] = text
      })
    }
  }
}
</script>

<style lang="less" scoped>
.col-view {
  display: flex;
  .view-body {
    flex: 1;
  }
  .view-tail {
    display: flex;
    align-items: center;
    padding-left: 8px;
    /deep/.el-dropdown {
      cursor: pointer;
    }
  }
}
.col-center {
  display: flex;
  justify-content: center;
}
</style>